<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-layout-content style="background: #fff">
        <div
            class="ma-content-block lg:flex p-4"
            v-if="cpu"
            style="background: #fff"
        >
            <a-skeleton animation v-if="loading" class="w-full">
                <a-space direction="vertical" class="w-full" size="large">
                    <a-skeleton-line :rows="5" />
                </a-space>
            </a-skeleton>
            <div class="flex justify-between w-full redis-info mt-3" v-else>
                <a-descriptions
                    :column="1"
                    size="large"
                    bordered
                    title="CPU信息"
                    class="lg:w-9/12 w-full"
                >
                    <a-descriptions-item label="型号">{{
                        cpu.name
                    }}</a-descriptions-item>
                    <a-descriptions-item label="核心数">{{
                        cpu.cores
                    }}</a-descriptions-item>
                    <a-descriptions-item label="缓存">{{
                        cpu.cache
                    }}</a-descriptions-item>
                    <a-descriptions-item label="使用率"
                        >{{ cpu.usage }}%</a-descriptions-item
                    >
                    <a-descriptions-item label="空闲率"
                        >{{ cpu.free }}%</a-descriptions-item
                    >
                </a-descriptions>
                <div class="echarts hidden lg:block">
                    <ma-chart
                        :options="cpuOptions"
                        width="350px"
                        height="350px"
                    />
                </div>
            </div>
        </div>

        <div
            class="ma-content-block lg:flex p-4 mt-3"
            v-if="memory"
            style="background: #fff"
        >
            <a-skeleton animation v-if="loading" class="w-full">
                <a-space direction="vertical" class="w-full" size="large">
                    <a-skeleton-line :rows="5" />
                </a-space>
            </a-skeleton>
            <div class="flex justify-between w-full redis-info mt-3" v-else>
                <a-descriptions
                    :column="1"
                    size="large"
                    bordered
                    title="内存信息"
                    class="lg:w-9/12 w-full"
                >
                    <a-descriptions-item label="总内存"
                        >{{ memory.total }}G</a-descriptions-item
                    >
                    <a-descriptions-item label="已使用内存"
                        >{{ memory.usage }}G</a-descriptions-item
                    >
                    <a-descriptions-item label="PHP使用内存"
                        >{{ memory.php }}M</a-descriptions-item
                    >
                    <a-descriptions-item label="空闲内存"
                        >{{ memory.free }}G</a-descriptions-item
                    >
                    <a-descriptions-item label="使用率"
                        >{{ memory.rate }}%</a-descriptions-item
                    >
                </a-descriptions>
                <div class="echarts hidden lg:block">
                    <ma-chart
                        :options="memoryOptions"
                        width="350px"
                        height="350px"
                    />
                </div>
            </div>
        </div>

        <div
            class="ma-content-block lg:flex p-4 mt-3"
            v-if="phpenv"
            style="background: #fff"
        >
            <a-skeleton animation v-if="loading" class="w-full">
                <a-space direction="vertical" class="w-full" size="large">
                    <a-skeleton-line :rows="5" />
                </a-space>
            </a-skeleton>
            <div class="flex justify-between w-full redis-info mt-3" v-else>
                <a-descriptions
                    :column="2"
                    size="large"
                    bordered
                    title="PHP及环境信息"
                    class="w-full"
                >
                    <a-descriptions-item label="操作系统">{{
                        phpenv.os
                    }}</a-descriptions-item>
                    <a-descriptions-item label="PHP版本">{{
                        phpenv.php_version
                    }}</a-descriptions-item>
                    <a-descriptions-item label="Swoole版本">{{
                        phpenv.swoole_version
                    }}</a-descriptions-item>
                    <a-descriptions-item label="Hyperf版本">{{
                        phpenv.hyperf_version
                    }}</a-descriptions-item>
                    <a-descriptions-item label="MineAdmin版本">{{
                        phpenv.mineadmin_version
                    }}</a-descriptions-item>
                    <a-descriptions-item label="系统物理路径">{{
                        phpenv.project_path
                    }}</a-descriptions-item>
                    <a-descriptions-item label="系统启动时间">{{
                        phpenv.start_time
                    }}</a-descriptions-item>
                    <a-descriptions-item label="系统运行时间">{{
                        phpenv.run_time
                    }}</a-descriptions-item>
                    <a-descriptions-item label="磁盘信息" v-if="disk">
                        总空间：{{ disk.total }}
                        <a-divider direction="vertical"></a-divider>
                        已使用：{{ disk.usage }}
                        <a-divider direction="vertical"></a-divider>
                        已剩余：{{ disk.free }}
                        <a-divider direction="vertical"></a-divider>
                        使用率：{{ disk.rate }}
                    </a-descriptions-item>
                </a-descriptions>
            </div>
        </div>
    </a-layout-content>
</template>

<script setup>
import { ref, reactive } from 'vue';
import monitor from '@/api/system/monitor';
import { Message } from '@arco-design/web-vue';

const cpuOptions = ref({});
const memoryOptions = ref({});
const cpu = ref({});
const memory = ref({});
const phpenv = ref({});
const disk = ref({});
const loading = ref(true);

const getCacheInfo = async () => {
    loading.value = true;
    const response = await monitor.getServerInfo();
    cpu.value = response.data?.cpu;
    memory.value = response.data?.memory;
    phpenv.value = response.data?.phpenv;
    disk.value = response.data?.disk;
    cpuOptions.value = {
        tooltip: { formatter: '{b} : {c}%' },
        series: [
            {
                name: 'CPU使用率',
                type: 'gauge',
                progress: { show: true },
                detail: { valueAnimation: true, formatter: '{value}' },
                data: [{ value: cpu.value.usage, name: 'CPU使用率' }]
            }
        ]
    };

    memoryOptions.value = {
        tooltip: { formatter: '{b} : {c}%' },
        series: [
            {
                name: '内存使用率',
                type: 'gauge',
                progress: { show: true },
                detail: { valueAnimation: true, formatter: '{value}' },
                data: [{ value: memory.value.rate, name: '内存使用率' }]
            }
        ]
    };

    loading.value = false;
};

getCacheInfo();
</script>

<script>
export default { name: 'system:monitor:server' };
</script>

<style scoped>
.redis-info {
    max-height: 260px;
    overflow: hidden;
}
.echarts {
    width: 350px;
    position: relative;
    top: -10px;
    right: -10px;
}
</style>
